import React, { useEffect, useState, useRef } from "react";
import { Input, Tabs, Collapse, Button } from 'antd';
import { request } from 'dw-mx-request';
import './style/operationPanel.css';
import classNames from 'classnames';
import ReactEditor from '@/ReactEditor';
import JavascriptEditor from '@/application/components/JavascriptEditor';
import ViewComponents from '@/application/components/ViewComponents';

export default function LeftPanelComponent(props) {

    const [code, updateCode] = useState(`
(props) => {
  useEffect(()=>{
    console.log(props);

    var myChart = echarts.init(divRef.current);
    myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
  }, []);

  const [count, updateCount] = useState(0)
  const divRef = useRef();
  const {xm} = props; 
  // props 能拿到值;
  
  return (
    <>
      <div style={{color: "red"}}>
        <div>内部状态: {count} <button onClick={()=>updateCount(count+1)}>add</button></div>
        <div>外部传入:{xm} </div>
      </div>
      <div ref={divRef} style={{ width: 400, height: 400 }}></div>
    </>
    );
}        
  `);

    const codeProps = {
        xm: "张三",
    };


    const [jsonValue, updateJsonValue] = useState(`
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

  `);



    const { Panel } = Collapse;
    const [appID, setAppID] = useState('');
    const [pageID, setPageID] = useState('');
    const [generalShow, setGeneralShow] = useState(false);
    const [mineShow, setMineShow] = useState(false);
    const [customiseShow, setCustomiseShow] = useState(false);
    const [businessShow, setBusinessShow] = useState(false);
    const [bigscreenShow, setBigscreenShow] = useState(false);

    useEffect(() => {
        setAppID(props.appid);
        setPageID(props.pageid);
    }, [props.appid, props.pageid]);

    const callback = (key) => {
        console.log(key);
    };

    const clickGeneralBtn = () => {
        setGeneralShow(true);
        setMineShow(false);
        setCustomiseShow(false);
        setBusinessShow(false);
        setBigscreenShow(false);
    };
    const clickMineBtn = () => {
        setGeneralShow(false);
        setMineShow(true);
        setCustomiseShow(false);
        setBusinessShow(false);
        setBigscreenShow(false);
    };
    const clickCustomiseBtn = () => {
        setGeneralShow(false);
        setMineShow(false);
        setCustomiseShow(true);
        setBusinessShow(false);
        setBigscreenShow(false);
    };
    const clickBusinessBtn = () => {
        setGeneralShow(false);
        setMineShow(false);
        setCustomiseShow(false);
        setBusinessShow(true);
        setBigscreenShow(false);
    };
    const clickBigscreenBtn = () => {
        setGeneralShow(false);
        setMineShow(false);
        setCustomiseShow(false);
        setBusinessShow(false);
        setBigscreenShow(true);
    };

    return (
        <div className={classNames('dlc-lpc', {
            'dlc-lpc-general-show': generalShow,
            'dlc-lpc-mine-show': mineShow,
            'dlc-lpc-customise-show': customiseShow,
            'dlc-lpc-business-show': businessShow,
            'dlc-lpc-bigscreen-show': bigscreenShow,
        })}>
            <Collapse defaultActiveKey={['']} onChange={(val)=>callback(val)}>
                <Panel header="更多组件" key={appID + pageID + '01'}>
                    <p>{appID}</p>
                </Panel>
            </Collapse>
            <Button className={'dlc-lpc-btn'} block={true} onClick={()=>clickGeneralBtn()}>常用组件</Button>
            <Button className={'dlc-lpc-btn'} block={true} onClick={()=>clickMineBtn()}>我的组件</Button>
            <Button className={'dlc-lpc-btn'} block={true} onClick={()=>clickCustomiseBtn()}>自定义组件</Button>
            <Button className={'dlc-lpc-btn'} block={true} onClick={()=>clickBusinessBtn()}>业务组件</Button>
            <Button className={'dlc-lpc-btn'} block={true} onClick={()=>clickBigscreenBtn()}>大屏组件</Button>
            <div className={'dlc-lpc-general'}>
                常用组件
            </div>
            <div className={'dlc-lpc-mine'}>
                我的组件
            </div>
            <div className={'dlc-lpc-customise'}>
                <ViewComponents ctype={'0'}/>
            </div>
            <div className={'dlc-lpc-business'}>
                业务组件
            </div>
            <div className={'dlc-lpc-bigscreen'}>
                <ViewComponents ctype={'1'}/>
            </div>
        </div>
    );
}